<template>
  <div>
    <h2>执行动画效果</h2>
    <div ref="box" class="box">Hello,World!</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const box = ref()

onMounted(() => {
  // 组件挂在之后执行动画效果
  box.value.style.transition = 'transform 2s'
  box.value.style.transform = 'translateX(800px)'
})
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}
</style>
